<template>
	<view>
		<view class="banner">
			<!-- 轮播图 -->
			<swiper class="swiper-box" :circular="true" :autoplay="true" :indicator-dots="true">
				<swiper-item v-for="(item, index) in imageList" :key="index">
					<view class="swiper-item">
						<image :src="item" mode="aspectFill" :draggable="false" />
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="notice-title">
			{{this.banner.noticeTitle}}
		</view>
		<view class="auther-time">
			<view  style="margin-left: 125rpx;">
				作者：<text style="color: black; font-size: 29rpx;">{{this.banner.createBy}}</text>
			</view>
			<view>
				<text style="margin-right: 155rpx; font-size: 19rpx; color: slategray;">{{this.banner.createTime}}</text>
			</view>
		</view>
		<view class="article-meta" >
			<view >
			<mp-html :content="this.banner.noticeContent"/>
			</view>
		</view>
	</view>
</template>
<script>

 import mpHtml from '@/components/mp-html/mp-html'
	export default {
		data() {
			return {
				imageList:[],
				sceneList: [],
				banner: []
			}
		},
		onLoad(option) {
			const item = JSON.parse(decodeURIComponent(option.item));
			this.imageList=item.notice_photo.split(",");
			console.log(this.imageList+"!@");
			this.banner = item;
			//详情标题
			uni.setNavigationBarTitle({
				title: this.banner.noticeTitle
			});
		},
		methods: {},
		onShow() { 
		},
		created() {
			
		}
	}
</script>
<style>
	.article-meta {
		
		border-radius: 5px;
		background-color: #fff;
		margin: 28px 5px 5px 5px;
		padding: 0px 5px;
		text-indent:30px;
		box-shadow: 0 0 4px 4px #bec8cc ;
	}
	page {
		background-color: #f5f5f5;
	}
	.swiper {
		height: 400rpx;
	}

	.swiper-box {
		height: 400rpx;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		height: 400rpx;
		line-height: 300rpx;
	}

	.banner {
		height: 360upx;
		overflow: hidden;
		position: relative;
		background-color: #ccc;
	}
	.notice-title{
		font-weight: bold;
		font-size: 38rpx;
		margin-bottom: 16rpx;
		display: flex;
		justify-content: center;
		margin-top: 35rpx;
		margin-bottom: 35rpx;
	}
	.auther-time{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 15rpx;
	}
</style>
